<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Warrior">
    <title>倒计时</title>
    <style>

    </style>
</head>

<body>
    <h1></h1>
    <script>
        var targetDate = new Date('2017-09-22 00:00:00').getTime();
        var nowDate = new Date().getTime();
        var time = Math.floor((targetDate - nowDate) / 1000);
        var MIN = 60;
        var HOUR = 60 * MIN;

        function handleStr(str) {
            str = str >= 0 ? '0' + str : "0";
            return str.substr(-2);
        }

        function showTime() {
            var hours = Math.floor(time / HOUR);
            var minutes = Math.floor(time % HOUR / MIN);
            var seconds = Math.floor(time % MIN);

            var resultStr = '';
            if (time <= 0) {
                resultStr = '结束抢购';
            } else {
                if (hours < 1) {
                    if (minutes < 1) {
                        resultStr = handleStr(seconds);
                    } else {
                        resultStr = handleStr(minutes) + '<span>:</span>' + handleStr(seconds);
                    }
                } else {
                    resultStr = handleStr(hours) + '<span>:</span>' + handleStr(minutes) + '<span>:</span>' + handleStr(seconds);
                }
            }
            document.querySelector('h1').innerHTML = resultStr;
        }

        function count() {

            setTimeout(function () {
                time--;
                showTime();
                setTimeout(arguments.callee, 1000);
            }, 1000);
        }
        count();

    </script>
</body>

</html>